<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>轮播 - Xui Demo</title>
	<!-- demo -->
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../demo_data.js"></script>
	
	<!-- xui -->
	<link rel="stylesheet" type="text/css" href="../../xui.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../xui.js"></script>
	
	<!-- xslider -->
	<script type="text/javascript">
		$(function(){
			var xslider = $("#xslider").xslider({
				width:'80%'				//宽度默认为100%
			});
		})
	</script>
</head>
<body>
	<h2>轮播</h2>
	<div class="xslider" id="xslider">
		<div class="xbox">
			<a class="xitem" href="https://www.baidu.com">
				<img src="../img/1.jpg">
				<div class="xtitle"><span>赏金猎人·厄运小姐</span></div>
			</a>
			<a class="xitem" href="https://www.baidu.com">
				<img src="../img/2.jpg">
				<div class="xtitle"><span>疾风剑豪·亚索</span></div>
			</a>
			<a class="xitem" href="https://www.baidu.com">
				<img src="../img/3.jpg">
				<div class="xtitle"><span>不祥之刃·卡特琳娜</span></div>
			</a>
			<a class="xitem" href="https://www.baidu.com">
				<img src="../img/4.jpg">
				<div class="xtitle"><span>探险家·伊泽瑞尔</span></div>
			</a>
		</div>
	</div>
</body>
</html>